import React, { Component } from 'react';
import { Link,Route } from 'react-router-dom';
export default class UserList extends Component {
    state = { 
        show: true,
         entered: false,
     }

        toggleEnterState = ()=>{
            return this.setState({
                in:!this.state.in
            });
        }

        render() {
            const defaultStyle = {
                transition: `opacity 1000ms ease-in-out`,
                opacity: 0,
            };

            const transitionStyles = {
                entering: { opacity: 0 },
                entered:  { opacity: 1 },
            };

            const { show } = this.state;
            return (
              <div>
                    <C1 pname='ytt' />
                    <Link to='/add_user/test1'>test1</Link>
                    <Route component={Test1} path='/add_user/test1'  />
              </div>
            );
        }
 
}

function Test1(){
    return (<div style={{
        border:'solid 1px yellow'
    }}>
        I am test1
    </div>)
};

class C1 extends Component{
    state = {
        name:''
    }
    static getDerivedStateFromProps(props,state){
        return {
            name:props.pname + '---cy'
        }
    }
    render(){
        return(<div>
            c1
            <p>
                {this.state.name}
            </p>
        </div>)
    }

}